<template>
  <div class="address">
    <el-radio-group v-model="view" @change="onChange(view)" class="address-list">
      <van-panel
        :title="address.name"
        :status="address.tel"
        v-for="(address, index) in addressList"
        :key="index"
      >
        <div class="address-detail">{{address.address}}</div>
        <div slot="footer" class="flexbox address-actions">
          <el-radio
            class="radio"
            v-model="report"
            :key="index"
            :label="address"
          >{{address.isDefault?'默认地址':'设为默认'}}</el-radio>
          <div>
            <el-button type="text" icon="el-icon-edit" @click="onEdit(address.id)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" @click="onDelete(index)">删除</el-button>
          </div>
        </div>
      </van-panel>
    </el-radio-group>
    <div class="bottom-action">
      <van-button type="primary" round="true" bottom-action @click="onEdit(0)">新增收件地址</van-button>
    </div>
  </div>
</template>

<script>
import { Row, Col, Icon, Cell, CellGroup, Panel, Button } from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Button.name]: Button
  },
  data () {
    return {
      view: null,
      report: '',
      addressList: []
    }
  },

  created () {
    this.axios
      .get('/user/address')
      .then(response => {
        this.addressList = response.data
        this.view = this.addressList.filter(item => item.isDefault)[0]
      })
      .catch(function (error) {
        console.log(error)
      })
  },

  methods: {
    onEdit (id) {
      this.$router.push({ name: 'user/address/:id', params: { id: id } })
    },
    onDelete (index) {
      let address = this.addressList[index]
      this.$confirm('确认要删除该地址吗？', '', {
        center: true,
        top: '50%',
        customClass: 'el-message-box-icon',
        dangerouslyUseHTMLString: true,
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        confirmButtonClass: 'el-button--warning'
      }).then(() => {
        console.log(index)
        // 删除收件地址
        this.axios
          .delete('/user/address/delete?id=' + address.id)
          .then(response => {
            this.addressList.splice(index, 1)
          })
          .catch(function (error) {
            console.log(error)
          })
      })
    },
    onChange (view) {
      // 设置默认收件地址
      this.axios
        .post('/user/address/default?id=' + view.id)
        .then(response => {
          if (response.data === true) {
            this.addressList.forEach(function (c) {
              if (c.id === view.id) {
                c.is_default = true
              } else {
                c.is_default = false
              }
            })
          } else {
            this.view = false
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.address-list {
  width: 100%;
}
.address-list /deep/ .van-cell-group {
  margin-bottom: 10px;
}
.address-detail {
  font-size: 14px;
  line-height: 1.44;
  padding: 15px;
}
.address-actions {
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: initial;
}
.address-actions label {
  padding: 10px 0;
}

.address-list /deep/ .van-cell {
  font-size: 15px;
}

.address-actions /deep/ .el-button--text {
  color: #606266;
}

.address-list /deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #ff6600;
}
.address-list /deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #ff6600;
  background: #ff6600;
}

.address-list /deep/ .van-panel__header .van-cell__value {
  color: #333;
}

.address-list /deep/ .van-panel__footer {
  padding-top: 0;
  padding-bottom: 0;
}

.bottom-action {
  padding: 10px 15px;
}
.bottom-action button {
  border-radius: 3px;
  height: 45px;
  line-height: 45px;
}
</style>
